<template>
	<view class="px-4 pb-4 page-bg">
		<custom-nav-bar title="分类" />
		<view class="grid grid-cols-3 gap-2">
			<!-- <theme-item v-for="item in 16" :key="item" /> -->
			<theme-item v-for="item in classList" :key="item.id" :data="item" />
		</view>
		<uni-load-more :status="state.status" />
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import { onReachBottom } from '@dcloudio/uni-app'
	import { getClassify } from '@/api/home'

	const classList = ref([])
	const state = reactive({
		status: 'more',
		total: 0,
		pageNum: 1,
		pageSize: 15
	})

	async function pageInit() {
		state.status = 'loading'
		const params = {
			pageNum: state.pageNum,
			pageSize: state.pageSize
		}
		getClassify(params)
			.then((res) => {
				state.total = res.total
				classList.value.push(...res.data)
			})
			.finally(() => {
				state.status = 'more'
			})
	}

	pageInit()

	// 触底刷新
	onReachBottom(() => {
		if (classList.value.length >= state.total) return (state.status = 'no-more')
		state.pageNum++
		pageInit()
	})
</script>
